<template>
  <div id="registerPage" class="view">
    <el-row class="header_login">
      <el-col :span="4"><h2>用户注册</h2></el-col>
      <el-col :span="4" :offset="16">已有账号？<router-link to="/login">立即登录</router-link></el-col>
    </el-row>
    <el-row style="padding: 60px;width: 500px;margin: auto">
      <el-form :label-position="labelPosition" label-width="80px" :model="form">
        <el-form-item label="用户名:">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input @blur='surePassword' v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:">
          <el-input @blur='surePassword' v-model="form.surePwd" type="password" placeholder="请输入确认密码"></el-input>
        </el-form-item>
        <el-form-item label="提现密码:">
          <el-input v-model="form.drawPassword" type="password"  placeholder="请输入提现密码"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="danger" @click='register' style="width: 100%">立即注册</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
	import md5 from 'md5'
  export default {
    data () {
      return {
        labelPosition: 'right',
        form: {
          username: undefined,
          password: undefined,
          surePwd: undefined,
          drawPassword: undefined
        }
      }
    },
    methods: {
    	register () {
    		if (!this.form.username) {
          this.$message.info('请输入用户名')
          // this.$notify.warning('请输入用户名')
        } else if (!this.form.password) {
          this.$message.info('请输入密码')
        } else if (!this.form.surePwd) {
          this.$message.info('请输入确认密码')
        } else if (!this.form.drawPassword) {
          this.$message.info('请输入提现密码')
        } else if (this.form.password == this.form.surePwd){
            let params = {}
            Object.assign(params, this.form)
            params.password = md5(params.password)
            params.drawPassword = md5(params.drawPassword)
            this.$api.register(params).then(res => {
              if (res.code === '000000') {
                console.log(res)
                this.$message.success('注册成功,请重新登录')
                for(var key in this.form) {
                  this.form[key] = undefined
                }
              }
            })
        } else{
          this.$message.error('您两次输入的密码不一致！')
        }
    	},
    	surePassword () {
    		if(this.form.password != '' && this.form.surePwd != '') {
    			if(this.form.password != this.form.surePwd) {
    				this.$message.info('密码需和确认密码一致')
    			}
    		}
    	}
    }

  }
</script>

<style lang="less">
  #registerPage{
   // padding: 30px 0 80px 10px;
    margin-top: 20px;
    border:1px solid #ddd;
    .header_login{
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ddd;
    }
  }
</style>
